<template>
  <!-- <div class="wei"> -->
  <el-container class="layout">
    <el-aside>
      <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">
        <div class="logo flex-center">
          <img src="@/assets/images/logo.svg" alt="logo" />
          <!-- <span v-show="!isCollapse">Geeker Admin</span> -->
        </div>
        <el-scrollbar>
          <el-menu :default-active="activeMenu" :router="false" :collapse-transition="false" background-color="#191a20"
            text-color="#bdbdc0" active-text-color="#ffffff" :collapse="isCollapse">
            <Menu :routeArr="routeArr"></Menu>
          </el-menu>
        </el-scrollbar>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <ToolBarLeft></ToolBarLeft>
        <ToolBarRight></ToolBarRight>
      </el-header>
      <Main></Main>
    </el-container>
   
  </el-container>


  <!-- </div> -->
</template>

<script setup>
import Main from "../components/main/index.vue";
import Menu from "../components/menu/submenu.vue";
// import Footer from "../components/footer/index.vue";
// import Tabs from "../components/tabs/index.vue";
import ToolBarLeft from "../components/header/toolBarLeft.vue";
import ToolBarRight from "../components/header/toolBarRight.vue";
// 制作水印的自定义指令
// import vWatermarker from "@/directives/modules/watermarkes.js"


import { computed, reactive, ref, watchEffect } from "vue";
import { mainStore } from "@/stores";
import { useRoute } from "vue-router"
let route = useRoute()
let mStore = mainStore();

let routeArr = mStore.routeArr;

// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";



let isCollapse = ref(true);

watchEffect(() => {
  isCollapse.value = mStore.collapseIcon;
});

let activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path))
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

<style lang="scss" scoped>
.layout {
  position: relative;

  .el-menu,
  .el-menu--popup {
    :deep(.el-menu-item) {
      &.is-active {
        background: #060708;

        &::before {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          content: "";
          background: var(--el-color-primary);
        }
      }
    }
  }

  // .el-main {
  //   box-sizing: border-box;
  //   // padding: 10px 12px;
  //   // overflow-x: hidden;
  //   background-color: #f0f2f5;

  //   &::-webkit-scrollbar {
  //     background-color: #f0f2f5;
  //   }
  // }
}
</style>